<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖后台管理系统</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <style>
        .table {
            width: 1200px;
            margin: 0 auto;
        }

        .el-pagination {
            float: right;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div id="app">

    <div class="title" style="text-align: center;margin-top: 50px">
        <h1>Lucky 抽奖网后台管理系统</h1>
    </div>

    <div v-if="request.token" class="logoOut" style="position: absolute;right: 50px;top:100px">
        <el-button size="small" @click="handleLogout">退出登录</el-button>
    </div>

    <!--  弹出框  -->
    <el-dialog
            v-if="!request.token"
            title="管理员登录"
            :show-close="false"
            :modal="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="dialogVisible"
            width="30%">
        <div>
            <el-form ref="form" :model="loginForm" label-width="100px">
                <el-form-item label="管理员账号">
                    <el-input tabindex="1" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input tabindex="2" type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                    <div style="display: flex;justify-content: space-between">
                        <div style="width: 250px">
                            <el-input tabindex="3" v-model="loginForm.code"
                                      @keypress.enter.native="handleLogin"></el-input>
                        </div>
                        <div style="width: 200px;height: 40px" @click="getCaptcha" v-loading="loading">
                            <img :src="img" style="width: 100%;height: 100%"/>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleLogin">登 录</el-button>
        </span>
    </el-dialog>

    <div class="table" v-if="request.token">
        <el-table
                :data="tableData"
                border
                v-loading="loading"
                style="width: 100%">

            <el-table-column
                    label="序号"
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="title"
                    label="活动标题"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="count"
                    label="允许抽奖次数"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="startTime"
                    label="活动开始时间"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="endTime"
                    label="活动结束时间"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="statusName"
                    label="活动状态"
                    width="200">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="success" @click="handlePass(scope.row)" size="small">通 过</el-button>
                    <el-button type="danger" @click="handleReject(scope.row)" size="small">拒 绝</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :current-page.sync="page.pageNum"
                :page-size="page.pageSize"
                :total="page.total">
        </el-pagination>
    </div>

    <div v-if="!request.token" class="footer" style="position: absolute;bottom: 100px;right: 50px;z-index: 999999999">
        <a href="./doc.html">接口文档</a>
    </div>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            dialogVisible: true,
            request: {
                token: window.localStorage.getItem("User-Token"),
                client: 'admin'
            },
            loginForm: {
                username: "",
                password: "",
                code: "",
                key: ""
            },
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            loading: true,
            tableData: [],
            img: "",
        },
        created() {
            if (!this.request.token) {
                this.getCaptcha()
            } else {
                this.getTableData()
            }
        },
        methods: {
            getCaptcha() {
                this.loading = true
                axios.get("/captcha").then(res => {
                    this.loading = false
                    let {data} = res.data;
                    this.img = data.img;
                    this.loginForm.key = data.key;
                })
            },
            handleLogin() {
                axios.post("/admin/user/login", this.loginForm).then(res => {
                    let {data, code, message} = res.data;
                    if (code === 200) {
                        window.localStorage.setItem("User-Token", data.token)
                        this.request.token = data.token
                        this.$message({
                            type: "success",
                            message: "登录成功!"
                        })
                        this.dialogVisible = false
                        this.getTableData()
                    } else {
                        this.$message({
                            type: "error",
                            message: message
                        })
                        this.getCaptcha()
                        this.dialogVisible = true
                    }

                })
            },
            getTableData() {
                let config = {
                    headers: {
                        "Authorization": this.request.token,
                        "Client": this.request.client
                    }
                }
                this.loading = true
                axios.get(`/admin/lucky/list?pageNum=${this.page.pageNum}&pageSize=${this.page.pageSize}`, config).then(res => {
                    this.loading = false
                    const {data, code, message} = res.data
                    if (code === 403) {
                        this.$message({
                            type: "warning",
                            message: message
                        })
                    }
                    this.tableData = data.list.map(item => {
                        switch (item.status) {
                            case 0:
                                item.statusName = "审核中"
                                break
                            case 1:
                                item.statusName = "进行中"
                                break
                            case 2:
                                item.statusName = "已结束"
                                break
                            case 3:
                                item.statusName = "审核失败"
                                break
                            default:
                                break
                        }
                        return item
                    })
                    this.page.pageNum = data.pageIndex
                    this.page.pageSize = data.pageSize
                    this.page.total = data.totalRecords
                })
            },
            handlePass(row) {
                let config = {
                    headers: {
                        "Authorization": this.request.token,
                        "Client": this.request.client
                    }
                }
                if (row.status === 0) {
                    axios.get(`/admin/lucky/pass/${row.id}`, config).then(res => {
                        console.log("通过", res)
                        const {code} = res.data
                        if (code === 200) {
                            this.$message({
                                type: "success",
                                message: "审核通过!"
                            })
                            this.getTableData()
                        } else {
                            this.$message({
                                type: "warning",
                                message: "审核失败!"
                            })
                        }
                    })
                } else {
                    this.$message({
                        type: "info",
                        message: "该活动状态不对，无法审核!"
                    })
                }
            },
            handleReject(row) {
                let config = {
                    headers: {
                        "Authorization": this.request.token,
                        "Client": this.request.client
                    }
                }
                if (row.status === 0) {
                    axios.get(`/admin/lucky/fail/${row.id}`, config).then(res => {
                        console.log("拒绝", res)
                        const {code} = res.data
                        if (code === 200) {
                            this.$message({
                                type: "success",
                                message: "拒绝通过!"
                            })
                            this.getTableData()
                        } else {
                            this.$message({
                                type: "warning",
                                message: "拒绝失败!"
                            })
                        }
                    })
                } else {
                    this.$message({
                        type: "info",
                        message: "该活动状态不对，无法审核!"
                    })
                }
                console.log(row)
            },
            handleCurrentChange(val) {
                this.page.pageNum = val
                this.getTableData()
            },
            handleLogout() {
                let config = {
                    headers: {
                        "Authorization": this.request.token,
                        "Client": this.request.client
                    }
                }
                axios.get("/admin/user/logout", config).then(res => {
                    const {code} = res.data
                    if (code === 200) {
                        window.localStorage.removeItem("User-Token")
                        window.location.reload()
                        this.$message({
                            type: "success",
                            message: "退出成功!"
                        })
                    }
                })

            }

        }
    })

</script>
</body>
</html>